@include b(route-header) {
  position: static;
  top: 0;
  z-index: 1;
  padding: 12px 20px 0;
  background-color: var(--#{$rd-prefix}background-color);

  @include e(breadcrumb) {
    min-height: 40px;
  }

  @include e(breadcrumb-link) {
    padding: 0 6px;
    font: inherit;
    color: inherit;
    text-decoration: none;
  }

  @include e(breadcrumb-item) {
    padding: 0 6px;
  }

  @include e(header) {
    @include polyfill-gap(12px, 20px);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    padding-bottom: 16px;
  }

  @include e(header-title-container) {
    display: inline-flex;
    align-items: center;
  }

  @include e(header-back) {
    @include utils-button(true);

    padding: 0;
    margin: 0 8px 0 0;
    color: inherit;
    background-color: transparent;
    border: none;
    transition: color var(--#{$rd-prefix}animation-duration-base) linear;

    &:hover,
    &:focus {
      color: var(--#{$rd-prefix}color-primary-lighter);
    }

    &:active {
      color: var(--#{$rd-prefix}color-primary-darker);
    }
  }

  @include e(header-title) {
    font-size: 1.5em;
    font-weight: $rd-font-weight-bold;
  }

  @include e(header-actions) {
    @include polyfill-gap(8px, 8px);

    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
